<template>
  <el-menu :default-active="$route.name" theme="dark" class="nav" router>
    <div class="nav__header">
      <img src="./assets/avatar.jpg" alt="" class="nav__header-avatar">
      <span class="nav__header-name">{{name}}</span>
    </div>
    <el-menu-item index="course">课程管理</el-menu-item>
    <el-menu-item index="sign">签到管理</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'nav',
  data () {
    return {
      name: JSON.parse(localStorage.getItem('userInfo')).name
    }
  }
}
</script>

<style scoped>
.nav__header {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.nav__header-avatar {
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.nav__header-name {
  font-size: 13px;
  color: #fff;
  margin-top: 5px;
}
</style>
